<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("name");
    String password = request.getParameter("password");
    String message = request.getParameter("message");
    System.out.println("接收的name= " + name);
    System.out.println("接收的password = " + password);
    System.out.println("接收的message = " + message);
    if(message==null) message="";
    if(name==null) name ="";
    if(password==null) password="";
%>
<html>
<head>
    <title>vip用户</title>
    <link rel="stylesheet" href="<%=path%>/jingtai/bootstrap400/css/bootstrap.css">
    <script src="<%=path%>/jingtai/jquery-3.3.1.js"></script>
    <script src="<%=path%>/jingtai/bootstrap400/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div style="max-width: 350px;margin: 20px auto 10px;">
            <div style="text-align: center">
                <h2>vip</h2>
              <%--<%=path%>这个是从web这里开始算的,就相当于是绝对路径--%>
                <img src="<%=path%>/img/timg01.JPEG" width="100" style="border-radius: 80%">
            </div>
<%--onsubmit="return false"表单不允许提交，true就是允许提交，v()，是在允许提交的时候要执行的操作--%>
            <form  action="login" method="post" onsubmit="return v()">
                <div class="form-group">
                    <label for="name">请输入你的用户名</label>
                    <input type="text" name="name" id="name" value="<%=name%>" onblur="b()" class="form-control" placeholder="请输入你的用户名">
                    <small id="nameHelp" class="form-text text-danger" style="display: none;"><span>账号不能为空</span></small>
                </div>
                <div class="form-group">
                    <label for="password">请输入你的密码</label>
                    <input type="password" name="password" id="password" value="<%=password%>" onblur="y()" class="form-control" placeholder="请输入你的密码">
                    <small id="passwordHelp" class="form-text text-danger" style="display: none;"><span>密码不能为空</span></small>
                </div>
                <div class="form-group">
                    <!--d()实现点击事件，  通过id和onclick="d()"进行触发点击事件，这里的name="kaptcha"是进行将验证码输入进来提交-->
                    <input name="kaptcha"> <img id="k" src="<%=path%>/kaptcha.jsg" width="98" onclick="d()">
                </div>
                <!--class="form-group"调边距，两个边框的边距-->
                <div class="form-group">
                    <input type="submit" class="btn btn-success">
                </div>
            </form>
        </div>
    </div>

<%--    这里是判断如果用户名和密码任何一个为空都不能提交--%>
    <script>
        function v() {
            if ($("#name").val().trim()=="" ||$("#password").val().trim()==""){
                return false;
            }else {
                return true;
            }
        }
    </script>
    <script>
        //    验证码点击刷新事件
        function d() {
            //这里放的时对应的id $("#k")
            $("#k").attr("src",$("#k").attr("src"));
        }
    </script>
    <script>
        // var node = document.getElementById("message"); //null   //jquery
        // if(node){
        //     if(node.innerText.trim()!="") alert(node.innerText.trim());
        // }

        if($("#message").text().trim()!="") alert($("#message").text().trim());

        function b() {
            //===和双等号差不多，三等号就是表示完全相等
            if ($("#name").val().trim()==="")$("#nameHelp").show();
        }
//这里的$("#nameHelp").show();和$("#passwordHelp").show();实现的功能是将你点击输入标签的时候，如果你不输入数据它就会提示你该项不能为空
        function y() {
            if ($("#password").val().trim()==="")$("#passwordHelp").show();
        }
    </script>
</body>
</html>
